<template>
  <el-dialog
    title="标题档案查看"
    :visible.sync="dialogVisible"
    :fullscreen="true"
    :before-close="handleClose"
    class="watermark-dialog"
  >
    <div class="wrapper">
      <div class="leftWarp">
        <el-card class="box-card">
          <div class="nameStyle" :style="{ height: heightCard }">
            <p
              v-for="(item, index) in dataName"
              :key="index"
              @click="clickPersonName(item, index)"
              :class="{ highlight: index === personNameIndex }"
            >
              {{ item.personName }}
            </p>
          </div>
        </el-card>
      </div>
      <div class="centerWarp">
        <div class="left" :style="{ height: heightTree }">
          <el-tree
            ref="tree"
            style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px"
            :data="treeData"
            node-key="id"
            :props="defaultProps"
            highlight-current
            @node-click="handleNodeClick"
            :current-node-key="currentNodekey"
            :default-expanded-keys="
              treeData.length !== 0 ? [treeData[0].children[0]] : []
            "
          ></el-tree>
          <!-- :default-expanded-keys="[treeData[0].children[0]]" -->
        </div>
        <div class="right">
          <div class="thumbnail" :style="{ height: heightY }">
            <img
              v-for="(image, index) in newImageData"
              :src="image.description"
              :key="index"
              :style="{
                width: '140px',
                height: '200px',
                border: index === selectedImageIndex ? '2px solid red' : '',
              }"
              @click="selectImage(index)"
            />
          </div>
          <div class="bigPicture" :style="{ height: heightY }">
            <img
            v-watermark="watermarkText"
              id="bigPictureImg"
              :src="
                selectedImageIndex !== null && newImageData[selectedImageIndex]
                  ? newImageData[selectedImageIndex].description
                  : ''
              "
              alt=""
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
  
<script>
// import { getDetail} from "@/api/datacentersg/achives/documentApi";
import store from "@/store";
import { setWaterMark, removeWatermark } from "./watermark";
//import {getMaterialTree, clickMaterial,getImgFromCacheByFlag} from "@/api/datacentersg/achives/documentApi";
export default {
  data() {
    return {
      heightY: window.innerHeight - 85 + "px",
      heightTree: window.innerHeight - 80 + "px",
      heightCard: window.innerHeight - 120 + "px",
      tabPosition: "left",
      watermarkText:"watermarkText",
      imageData: [
        {
          description:
            "https://img2.baidu.com/it/u=870159714,3719145608&fm=253&fmt=auto&app=138&f=JPEG?w=351&h=500",
          id: "001",
          fileName: "4-1-1-001.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          id: "002",
          fileName: "4-1-1-002.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=55994022,1030234355&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
          id: "003",
          fileName: "4-1-1-003.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=1330959003,1248282479&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=780",
          id: "004",
          fileName: "4-1-1-004.jpg",
        },
        {
          description:
            "https://img0.baidu.com/it/u=1886047342,1826501707&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
          id: "005",
          fileName: "4-1-1-005.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=1368879157,3680317647&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          id: "006",
          fileName: "4-1-1-006.jpg",
        },
        {
          description:
            "https://img0.baidu.com/it/u=1880899726,3824907986&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
          id: "007",
          fileName: "4-1-1-007.jpg",
        },
        {
          description:
            "https://img1.baidu.com/it/u=1582055235,2869528729&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=716",
          id: "008",
          fileName: "4-1-1-008.jpg",
        },
      ],
      newImageData: [
        {
          description:
            "https://img2.baidu.com/it/u=870159714,3719145608&fm=253&fmt=auto&app=138&f=JPEG?w=351&h=500",
          id: "001",
          fileName: "4-1-1-001.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          id: "002",
          fileName: "4-1-1-002.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=55994022,1030234355&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
          id: "003",
          fileName: "4-1-1-003.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=1330959003,1248282479&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=780",
          id: "004",
          fileName: "4-1-1-004.jpg",
        },
        {
          description:
            "https://img0.baidu.com/it/u=1886047342,1826501707&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
          id: "005",
          fileName: "4-1-1-005.jpg",
        },
        {
          description:
            "https://img2.baidu.com/it/u=1368879157,3680317647&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          id: "006",
          fileName: "4-1-1-006.jpg",
        },
        {
          description:
            "https://img0.baidu.com/it/u=1880899726,3824907986&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
          id: "007",
          fileName: "4-1-1-007.jpg",
        },
        {
          description:
            "https://img1.baidu.com/it/u=1582055235,2869528729&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=716",
          id: "008",
          fileName: "4-1-1-008.jpg",
        },
      ],
      treeData: [
        {
          id: "01",
          parentId: "ZA",
          name: "一、履历材料",
          spell: null,
          children: [
            {
              id: "168",
              parentId: "01",
              name: "干部履历表",
              spell: null,
              children: null,
              data: null,
              flag: "1",
              relationState: null,
              isPart: null,
            },
          ],
          data: null,
          flag: "0",
          relationState: null,
          isPart: null,
        },
        {
          id: "02",
          parentId: "ZA",
          name: "二、自传材料",
          spell: null,
          children: [
            {
              id: "169",
              parentId: "02",
              name: "个人小结",
              spell: null,
              children: null,
              data: null,
              flag: "1",
              relationState: null,
              isPart: null,
            },
          ],
          data: null,
          flag: "0",
          relationState: null,
          isPart: null,
        },
        {
          id: "03",
          parentId: "ZA",
          name: "三、鉴定、考核材料",
          spell: null,
          children: [
            {
              id: "68",
              parentId: "03",
              name: "2017年度考核登记表",
              spell: null,
              children: null,
              data: null,
              flag: "1",
              relationState: null,
              isPart: null,
            },
            {
              id: "69",
              parentId: "03",
              name: "2018年度考核登记表",
              spell: null,
              children: null,
              data: null,
              flag: "1",
              relationState: null,
              isPart: null,
            },
            {
              id: "70",
              parentId: "03",
              name: "2019年度考核登记表",
              spell: null,
              children: null,
              data: null,
              flag: "1",
              relationState: null,
              isPart: null,
            },
          ],
          data: null,
          flag: "0",
          relationState: null,
          isPart: null,
        },
      ],
      // cities: images,
      checkedCities: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      selectedImageIndex: 0,
      currentNodekey: "",
      isIndeterminate: true,
      checkAll: false,
      textValue: "",
      oneselfData: [],
      cityItemIdAll: [],
      dialogVisible: true,
      dataName: [],
      personNameData: null,
      personNameIndex: 0,
    };
  },
  mounted() {
    setWaterMark('水印',"2024-03-05")
    // this.setWatermark("水印文字");
  },
  methods: {
    init(row) {
      this.dialogVisible = true;
      this.row = row;
      this.personNameIndex = 0;
      // this.getListDetail();
    },
    setWatermark(str) {
      this.$nextTick(() => {
        let image = document.getElementById("bigPictureImg");
        console.log(image);
        setTimeout(() => {
          let can = document.createElement("canvas");
          can.width = image.offsetWidth;
          can.height = image.offsetHeight;

          let cans = can.getContext("2d");
          cans.rotate((-20 * Math.PI) / 180);
          cans.font = "14px 微软雅黑";
          cans.fillStyle = "#000";
          cans.textAlign = "center";
          cans.textBaseline = "Middle";
          cans.fillText(str, can.width / 2, can.height, can.width);

          let div = document.createElement("div");
          div.style.position = "relative";
          div.style.top = "10px";
          div.style.left = "0px";
          // 透明度是改变演的深浅的标准
          div.style.opacity = "0.2";
          div.style.width = document.documentElement.clientWidth + 'px'
          div.style.height = document.documentElement.clientHeight + 'px'
          div.style.background =
            "url(" + can.toDataURL("image/png") + ") left top repeat";
          image.parentNode.insertBefore(div);
          div.appendChild(image);
        }, 500); // 延迟500毫秒添加水印
      });
    },

    clickPersonName(personNameItem, index) {
      this.newImageData = [];
      this.personNameData = personNameItem;
      this.personNameIndex = index; //设置选中的索引

      const fileNames = this.personNameData.empowerLable
        ? this.personNameData.empowerLable.split(",")
        : []; // 用逗号分割
      if (fileNames.length === 0) {
        // empowerLable为空，展示全部的imageData
        this.newImageData = [...this.imageData];
      } else {
        fileNames.forEach((fileName) => {
          const name = fileName.split("_")[0]; // 获取 name
          const realFileName = fileName.split("_")[1]; // 获取真正的文件名
          // 遍历this.treeData中的每一项
          this.treeData.forEach((treeItem) => {
            // 遍历该目录下的每一张图片
            treeItem.children.forEach((imageItem) => {
              if (imageItem.name == name) {
                // 如果图片文件名相同
                // 查找对应的图片对象
                this.imageData.forEach((item) => {
                  let itemFileName = item.fileName.replace(".jpg", "");
                  if (itemFileName == realFileName) {
                    this.newImageData.push(item);
                  }
                });
              }
            });
          });
        });
      }
    },

    //详情
    getListDetail() {
      this.newImageData = [];
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          applyId: this.row.applyId,
        },
      };
      getDetail(params).then((result) => {
        if (result.result) {
          this.dataName = result.resultdata.data.personList;
          // 拆分empowerLable属性，获取fileName和name
          const fileNames = this.dataName[0].empowerLable
            ? this.dataName[0].empowerLable.split(",")
            : []; // 用逗号分割
          if (fileNames.length === 0) {
            // empowerLable为空，展示全部的imageData
            this.newImageData = [...this.imageData];
          } else {
            fileNames.forEach((fileName) => {
              const name = fileName.split("_")[0]; // 获取 name
              const realFileName = fileName.split("_")[1]; // 获取真正的文件名
              // 遍历this.treeData中的每一项
              this.treeData.forEach((treeItem) => {
                // 遍历该目录下的每一张图片
                treeItem.children.forEach((imageItem) => {
                  if (imageItem.name == name) {
                    // 如果图片文件名相同
                    // 查找对应的图片对象
                    this.imageData.forEach((item) => {
                      let itemFileName = item.fileName.replace(".jpg", "");
                      if (itemFileName == realFileName) {
                        this.newImageData.push(item);
                      }
                    });
                  }
                });
              });
            });
          }
        }
      });
    },
    selectImage(index) {
      this.selectedImageIndex = index;
    },
    handleNodeClick(data) {
      this.oneselfData = [data];
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

  <style scoped>
.watermark-dialog {
  background-color: transparent;
}
.wrapper {
  width: 100vw;
  background: #eee;
  height: 100vh;
}
.leftWarp {
  float: left;
  width: 200px;
}
.nameStyle {
  text-align: center;
  font-size: 18px;
  color: #409eff;
  overflow-y: scroll;
}
.nameStyle p {
  padding: 5px;
  height: 40px;
}
.highlight {
  background-color: #c6e2ff;
  padding: 5px;
  height: 40px;
}
.left {
  float: left;
  margin-left: 6.625vw;
  background: #f7f2ec;
  width: 18.417vw;
  overflow-y: scroll;
}
.right {
  float: left;
  margin-left: 15px;
  background: #f7f2ec;
}
.thumbnail {
  width: 8.813vw;
  overflow-y: scroll;
  float: left;
  margin-bottom: 5px;
  background: #fff;
}
.bigPicture {
  float: left;
  width: 800px;
  margin-bottom: 5px;
  margin-right: 10px;
  background: #fff;
  margin-left: 10px;
}
>>> .el-tree-node__content {
  height: 60px;
}
.centerWarp {
  float: left;
}
/deep/ .el-tree > .el-tree-node > .el-tree-node__content {
  font-weight: 900;
  /* color: red; */
  background: #cfe5fc;
}
/deep/
  .el-tree
  > .el-tree-node
  > .el-tree-node__children
  > .el-tree-node
  > .el-tree-node__content
  > .el-tree-node__label {
  font-weight: 700;
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background: #6baef1;
}

>>> .el-tree-node__content {
  /* background-color: #CFE5FC; */
  margin-top: 2px;
}
</style>